<template>
  <div ref="pages">
    <div class="tabview newsPageDiv">
      <img src="@/assets/banner_waterdrop.png" />
      <Breadcrumb />
      <div>
        <span class="news-text">信用评价</span>
        <a-divider style="margin-top:20px;margin-bottom:20px;" />
      </div>
      <div class="search-div">
        <a-input
          v-model="pageFilter.nameUnit"
          placeholder="请输入单位名称"
          allow-clear
          style="font-size:14px;"
        />
        <a-button type="primary" class="report-search-btn" @click="onQuery">查询</a-button>
      </div>
      <div class="CustomTable-div" style="margin-top:20px;margin-bottom: -16px;">
        <CustomTable
          ref="table"
          :showAlert="false"
          :showSelection="false"
          :columns="columns"
          :loading="load"
          @change="onTableChange"
          :dataSource="pageData"
          rowKey="id"
        >

          <template slot="xh" slot-scope="text, record, index">
            {{((pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1))>9?(pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1) :'0' + (index + 1) }}
          </template>
          <template slot="dataBf" slot-scope="record">
            <span v-if="record!=='' && record!==null">{{ moment(record).format("YYYY-MM-DD") }}</span>
          </template>
          <template slot="effictivedateto" slot-scope="record">
            <span v-if="record!=='' && record!==null">{{ moment(record).format("YYYY-MM-DD") }}</span>
          </template>

          <template slot="dwlb" slot-scope="text">
<!--            <div>{{ text }}</div>-->
            <span>{{ dictText('单位类别',text) }}</span>
          </template>

          <template slot="creditLevel" slot-scope="text">
            <span>{{ dictText('信用等级类别',text) }}</span>
          </template>

        </CustomTable>
      </div>
    </div>
    <!-- <footerPage :page="4" ></footerPage> -->
  </div>
</template>

<script>
// import footerPage from '../footer/footerPage'
import Breadcrumb from "@/components/base/tools/Breadcrumb";
import api from "@/api/index";
import emv from "@/views/center/emptyVue.vue";
export default {
  name: "creditPage",
  inject: ["changeTab"],
  components: {
    //  footerPage,
    Breadcrumb
  },
  data() {
    return {
      clientHeight:'',
      screenHeight:'',
      collapsed: true,
      menukey: 1,
      load: false,
      queryinput: "",
      columns: [
        {
          title: "序号",
          dataIndex: "xh",
          key: "xh",
          width: 80,
          scopedSlots: { customRender: "xh" }
        },
        {
          title: "单位名称",
          dataIndex: "nameUnit",
          key: "nameUnit",
          scopedSlots: { customRender: "nameUnit" }
          // ellipsis: true
        },
        {
          title: "单位类别",
          dataIndex: "dwlb",
          key: "dwlb",
          scopedSlots: { customRender: "dwlb" }
          // ellipsis: true
        },

        {
          title: "信用等级",
          dataIndex: "creditLevel",
          key: "creditLevel",
          scopedSlots: { customRender: "creditLevel" }
          // ellipsis: true
        },
        {
          title: "评价年度",
          dataIndex: "yearEval",
          key: "yearEval",
          scopedSlots: { customRender: "yearEval" }
          // ellipsis: true
        },
        {
          title: "颁发日期",
          dataIndex: "dataBf",
          key: "dataBf",
          // ellipsis: true,
          scopedSlots: { customRender: "dataBf" }
        },
        {
          title: "有效期至",
          dataIndex: "effictivedateto",
          key: "effictivedateto",
          // ellipsis: true,
          scopedSlots: { customRender: "effictivedateto" }
        }
      ],
      pageData: [],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
        isPass:true,
      },
      dictDW:[],
    };
  },
    mounted(){
      this.setFootStyle();
      this.dictList()
    },
  created() {
    this.changeTab(3, "creditPage", '<span class="tab_name">信用评价</span>');
    // this.dictList()
    this.refreshTable();
  },
  methods: {
    getScreenHeight(){
        // 获取浏览器可视区域高度
        this.screenHeight =    document.body.clientHeight ; //`${document.documentElement.clientHeight}`
        window.onresize = function temp() {
          this.screenHeight = document.body.clientHeight;
        };
    },
    onLeftMenuClick({ key }) {
      this.menukey = key;
    },
    onTableChange(pageFilter) {
      this.pageFilter = { ...this.pageFilter, ...pageFilter };
      this.refreshTable();
    },

    //字典获取
    async dictList(){
      await api.get_dict().then(ser => {
        this.dictDW = ser
        // console.log(this.dictDW)
      })
    },
    dictText(val,text){
      let list = []
      var arr = (text || '').split(`,`)
      console.log(arr)
      for(let item of arr){
        for(let index of this.dictDW){
          if(item === index.dictValue && val === index.dictType){
            list.push(index.dictLabel)
          }
        }
      }
      if(list.length !== 0){
        return list.toString()
      } else {
        return text
      }

    },
    async refreshTable() {
      this.load = true;
      await api
        .get_credit_list(this.pageFilter)
        .then(res => {
          console.log(res)
          let pageNo = this.pageFilter.pageNo;
          let pageSize = this.pageFilter.pageSize;
          let records = res.rows;
          let total = res.total;
          this.pageData = {
            ...this.pageData,
            pageNo,
            records,
            pageSize,
            total
          };
          this.load = false;

        })
        .catch(err => {
          this.load = false;
        });
       this.setFootStyle()
    },
    onQuery() {
      this.pageFilter.pageNo = 1;
      this.refreshTable();
    },

    setFootStyle(){
       this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                   this.clientHeight = this.$refs.pages.offsetHeight+364;
                   if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>40){
                      emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",40);
                    }
                  }else{
                    emv.$emit("setfootmargintop",40);
                  }
                });
    },
  }
};
</script>
<style lang="less">
.newsPageDiv > img {
  width: 100%;
  max-width: 100%;
  margin-top: -2.5px;
  height: 120px;
}
.news-text {
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #337bd7;
}
.search-div {
  width: 320px;
  display: flex;
  .report-search-btn {
    // width: 80px;
    height: 40px;
    background: #337bd7;
    border: 0;
    border-radius: 4px;
    margin-left: 10px;
    margin-top: 1px;
    font-size: 14px;
  }
  .ant-btn-primary:hover,
  .ant-btn-primary:focus {
    color: #fff;
    background-color: #337bd7;
    border-color: #337bd7;
  }
  .ant-input-affix-wrapper .ant-input {
    position: relative;
    text-align: inherit;
    height: 41px;
  }
}
.CustomTable-div{
  .ant-table-thead > tr > th {
    padding: 16px 16px;
    overflow-wrap: break-word;
    font-size: 16px;
  }
  .ant-table-tbody > tr > td {
      padding: 16px 16px;
      overflow-wrap: break-word;
      font-size: 14px;
  }
}

</style>
